<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- 引入 Bootstrap -->
		<link href="./css/bootstrap.min.css" rel="stylesheet" />
		<script type="text/javascript" src="./js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="./js/bootstrap.min.js"></script>
		<style type="text/css">
			
		</style>
		<script type="text/javascript">
		var totalPageCount=0;
		var pageCount=0;
			$(function() {
				initInfo();
			});
			function initInfo() {
				$.ajax({
					type: "POST",
					url: "ckUserIsLogin",
					dataType: "json",
					success:function(data){
						if(data=="0"){
							location.href="login.html";
						}else{
							loadSentenceData("1")
						}
					}
					
				});
				
				
				
			}

			function loadSentenceData(pageNum) {
				
				var templateHtml = $("#panelTemplate").html();
				var journalHtml = '';
				$.ajax({
					type: "POST",
					url: "qrySentenceData",
					dataType: "json",
					data: {
						"pageNum":pageNum
					},
					async: false,
					success: function(data) {
						totalPageCount=data.totalPageCount;
						$.each(data.list, function(i, item) {
							var tmpHtml = templateHtml;
							tmpHtml = tmpHtml.replace("journal_title", item.title || "");
							tmpHtml = tmpHtml.replace("journal_content", item.content);
							tmpHtml = tmpHtml.replace("journal_id", item.id);
							tmpHtml = tmpHtml.replace("journal_credate", formatDate(item.credate));
							

							journalHtml += tmpHtml;
						});
						$("#content").html(journalHtml);
						var str1='';
						for (var i=1;i<=totalPageCount;i++){ 
							if(i==pageNum){
								str1+='<li class="active"><a href="javascript:loadSentenceData('+i+')">'+i+'</a></li>';	
							}else{
								str1+='<li><a href="javascript:loadSentenceData('+i+')">'+i+'</a></li>';
							}
							
						}
						var pageNumHtml='<li><a href="javascript:loadSentenceData('+(pageNum-1)+')">&laquo;</a></li>'+str1+'<li><a href="javascript:loadJournalData('+(pageNum+1)+')">&raquo;</a></li>';
						$("#pageNumUl").html(pageNumHtml);
					}
				});
				
				document.body.scrollTop = document.documentElement.scrollTop = 0;
			}

			function fun_formSubmit(url,params){
				var myform = $('<form></form>');
				// 设置属性
			    myform.attr('action', url);
			    myform.attr('method', 'post');
			    for(var m in params){
			    	// 创建Input
				    var my_input = $('<input  name="'+m+'" type="hidden" value="'+params[m]+'" />');
				     // 附加到Form
				    myform.append(my_input);
			    }
			    $(document.body).append(myform);
			    // 提交表单
			    myform.submit();
			}
			function formatDate(time){ //设置时间转换格式
				var date = new Date(time);
				var y = date.getFullYear();  //获取年
				    var m = date.getMonth() + 1;  //获取月
				    m = m < 10 ? '0' + m : m;  //判断月是否大于10
				    var d = date.getDate();  //获取日
				    d = d < 10 ? ('0' + d) : d;  //判断日期是否大10
				    return y + '-' + m + '-' + d;  //返回时间格式
			}
		</script>
	</head>

	<body>
		<div id="box" style="width: 90%; margin: 0 auto;">
			<div id="navdiv">
				<nav class="navbar navbar-default " role="navigation">
					<div class="container-fluid">
						<div class="navbar-header">
						</div>
						<div>
							<ul class="nav navbar-nav">
								<li class="active">
									<a href="#">数据测试</a>
								</li>
								<li class="">
									<a href="./blogIndex">首页</a>
								</li>
								<li><a href="addJournal.html">列表</a></li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
			<div id="content"></div>
			<div id="footdiv">
				<ul id="pageNumUl" class="pagination">
				</ul>
			</div>
		</div>

		<div id="panelTemplate" style="display: none;">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title ">journal_title</h3>
				</div>
				<div class="panel-body">journal_content</div>
				<div><div style="margin-left: 1rem;">journal_credate</div></div>
			</div>
		</div>

	</body>

</html>